<template>
  <div>
    <home-header></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-icons :iconList="iconList"></home-icons>
    <home-recommend :recommendList="recommendList"></home-recommend>
    <home-weekend :weekendList="weekendList"></home-weekend>
    {{this.homeScroll}}
  </div>
</template>

<script>
import HomeHeader from "./components/Header";
import HomeSwiper from "./components/Swiper";
import HomeIcons from "./components/Icons";
import HomeRecommend from "./components/Recommend";
import HomeWeekend from "./components/Weekend";
import axios from "axios";
import { mapState ,mapMutations} from "vuex";
export default {
  name: "Home",
  data() {
    return {
      lastCity: "",
      swiperList: [],
      iconList: [],
      recommendList: [],
      weekendList: [],
      scroll: 0,
    };
  },
  computed: {
    ...mapState(["homeScroll","city"])
  },
  methods: {
    getHome() {
      axios.get("/api/index.json?city=" + this.city).then(this.getHomeSucc);
    },
    getHomeSucc(res) {
      res = res.data;
      if (res.msg && res.data) {
        this.swiperList = res.data.swiperList;
        this.iconList = res.data.iconList;
        this.recommendList = res.data.recommendList;
        this.weekendList = res.data.weekendList;
      }
    },
    handleScroll(){
      this.scroll = Number.parseInt(document.documentElement.scrollTop) ||Number.parseInt(document.body.scrollTop);
    },
    ...mapMutations(["changeHomeScroll"])
  },
  mounted() {
    this.lastCity = this.city;
    this.getHome();
    window.addEventListener('scroll',this.handleScroll)
  },
  deactivated() {
    // 离开页面，滑动位置记录到vuex
    this.changeHomeScroll(this.scroll);
    window.removeEventListener('scroll',this.handleScroll);
    
  },
  activated() {
    // 再次来到页面，从vuex中取出上次离开时滑动的位置
    this.scroll = this.homeScroll;
    if(this.scroll>0){
      document.documentElement.scrollTop = this.scroll;
      document.body.scrollTop = this.scroll;
    }
    window.addEventListener('scroll',this.handleScroll)

    if (this.lastCity !== this.city) {
      this.lastCity = this.city;
      this.getHome();
    }
  },
  components: {
    HomeHeader,
    HomeSwiper,
    HomeIcons,
    HomeRecommend,
    HomeWeekend
  }
};
</script>

<style scoped lang="stylus">































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































// div































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































//   max-width: 750px































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































//   margin: 0 auto































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































































</style>
